<template>
  <div class="">
    <h2>看控制台</h2>

    <ul>
      <li
        v-for="(item, index) of list"
        :key="index"
        :class="{ 'is-active': item.isOk }"
        @click="setC(item)"
      >
        {{ item.name }}
      </li>
    </ul>
  </div>
</template>

<script>
import pdf from 'vue-pdf';
export default {
  name: '',
  components: {
    pdf,
  },
  props: {},
  data() {
    return {
      list: [
        { name: '数学', value: 1, isOk: false },
        { name: '英语', value: 2, isOk: false },
        { name: '语文', value: 3, isOk: false },
      ],
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    this.go();
  },
  methods: {
    go() {
      new Promise((resolve, reject) => {
        setTimeout(() => {
          console.log('3秒');
          resolve();
        }, 3000);
      }).then((value) => {
        return new Promise((resolve, reject) => {
          setTimeout(() => {
            console.log('2秒');
            resolve();
          }, 2000);
        }).then((value) => {
          setTimeout(() => {
            console.log('1秒');
          }, 1000);
        });
      });
    },

    setC(item) {
      this.list.forEach((e) => {
        if (e.value != item.value) {
          e.isOk = false;
        } else {
          item.isOk = true;
        }
      });
    },
  },
};
</script>

<style scoped lang="less">
li:hover {
  background-color: pink;
}

.is-active {
  color: aqua;
}
</style>
